<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件</title>
</head>

<body>
  <!-- 内联式 -->
  <form action="https://www.taobao.com" method="post">
    <input id="username" type="text" value="获取值"> <br>
    <label for="username"></label><br>
    <input type="checkbox" name="hobby" value="玩"> 玩
    <input type="checkbox" name="hobby" value="打代码"> 打代码<br>
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女 <br>
    <select name="address" id="">
      <option value="河北">河北</option>
      <option value="山东">山东</option>
      <option value="北京">北京</option>
    </select>
    <input type="submit" value="提交">
  </form>
  <script>
    let input = document.querySelector("input")
    let label = document.querySelector("label[for*='username']")
    let checkbox = document.querySelector("input[type='checkbox']")
    let radio = document.querySelector("input[type='radio']")
    let select = document.querySelector("select")
    let form = document.querySelector("form")
    // 点击事件
    input.onclick = function () {
      console.log("点击事件");
    }
    // 获取焦点,获取焦点先触发
    input.onfocus = function () {
      console.log("获取焦点");
    }
    // 输入的时候触发
    input.oninput = function () {
      console.log("输入触发");
      // console.log(input.value);
    }
    // 输入的时候触发
    input.onkeydown = function () {
      console.log("键盘按下");
      // console.log(input.value);
    }
    input.onkeyup = function () {
      console.log("键盘弹起");
      // console.log(input.value);
    }
    // 失去焦点做某件事,做校验
    input.onblur = function () {
      console.log("失去焦点");
      if (input.value.length < 5) {
        label.innerHTML = "5个字符以上"
      } else {
        label.innerHTML = ""
      }
    }
    // 失去焦点,并且value发生改变,先触发onchange 在失去焦点  
    input.onchange = function () {
      console.log("值改变了");
      // console.log(input.value);
    }

    // value值发生改变
    select.onchange = function () {
      console.log(select.value);
    }
    // form 表单,点击提交的按钮的时候会触发
    form.onsubmit = function () {
      console.log("提交的时候");
      return false
    }
  </script>
</body>

</html>